<template>
  <div class="moneylist">
    <div class="alllist">
      <div class="all_tb">
        <div>
          <table border="1px">
            <tr>
              <th>总金额</th>
              <th>总销售奖励</th>
              <th>总管理津贴</th>
              <th>总提现金额</th>
            </tr>
            <tr>
              <th>{{ allcount() }}</th>
              <th>{{ soldBounus() }}</th>
              <th>{{ manaBounus() }}</th>
              <th>{{ cash() }}</th>
            </tr>
          </table>
        </div>
            <div class="name_input">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="姓名">
                  <el-input v-model="formInline.user" placeholder="输入姓名"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-search" type @click="chaxun">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="reset"><i class="el-icon-refresh-right">重置</i></el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="exportCurrent()"><i class="el-icon-download">导出数据到Excel</i></el-button>
                </el-form-item>
              </el-form>
            </div>
        </div>
    </div>
    <div class="liuti">
      <div class="el-tabs__header">
              <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="大客户" name="first"></el-tab-pane>
                  <el-tab-pane label="合伙人" name="second"></el-tab-pane>
                </el-tabs>
              </template>
      </div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        style="width: 100%"
      >
        <el-table-column fixed prop="_id" label="ID" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="province" label="代理级别" width="120">
        </el-table-column>
        <el-table-column prop="province" label="代理区域" width="300">
        </el-table-column>
        <el-table-column prop="manaBounus" label="管理津贴" width="120">
        </el-table-column>
        <el-table-column prop="cash" label="提现金额" width="120">
        </el-table-column>
        <el-table-column prop="soldBounus" label="销售奖励" width="120">
        </el-table-column>
        <el-table-column prop="allcount" label="总金额" width="120">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template>
            <el-button type="primary">钱包明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagetations">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 8]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    exportCurrent: function() {
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable")); //表格id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "sheet.xlsx"
        ); //文件名
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    onSubmit() {
        console.log('submit!');
    },
    reset(){
      console.log('reset')
    },
    chaxun() {
      var y = this.formInline.user;
      console.log(this.formInline.user)
      this.newList = this.tableData.filter(function (x) {
        return x.name == y;
      });
    },
    allcount() {
      let sum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        sum += this.tableData[i].allcount;
      }
      return sum;
    },
    soldBounus() {
      let sum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        sum += this.tableData[i].soldBounus;
      }
      return sum;
    },
    manaBounus() {
      let sum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].manaBounus != null) {
          sum += this.tableData[i].manaBounus;
        }
      }
      return sum;
    },
    cash() {
      let sum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        sum += this.tableData[i].cash;
      }
      return sum;
    },
  },
  mounted() {
    this.axios.get("http://47.108.201.43:3000/api/getAgentSum").then((res) => {
      this.tableData = res.data.res;
    });
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 4,
      input: "",
      activeName: "second",
      formInline: {
          user: '',
          region: ''
        },
    };
  },
};
</script>
